<template>
  <view class="date-card">
    <view class="date-section">
      <text class="solar-date">{{ solarDate }}</text>
      <text class="lunar-date">{{ lunarDate }}</text>
    </view>
    <view class="divider"></view>
    <view class="almanac-section">
      <view class="almanac-item">
        <text class="label">宜</text>
        <text class="value">{{ suitable || '暂无数据' }}</text>
      </view>
      <view class="almanac-item">
        <text class="label">忌</text>
        <text class="value">{{ unsuitable || '暂无数据' }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { ref, onMounted } from 'vue'
import { getAlmanac } from '@/api/weather'

export default {
  name: 'DateCard',
  setup() {
    const solarDate = ref('')
    const lunarDate = ref('')
    const suitable = ref('')
    const unsuitable = ref('')

    const formatSolarDate = (dateStr) => {
      const date = new Date()
      const options = { month: 'long', day: 'numeric', weekday: 'long' }
      return date.toLocaleDateString('zh-CN', options)
    }

    const updateAlmanac = async () => {
      try {
        const data = await getAlmanac()
        solarDate.value = formatSolarDate(data.solarDate)
        lunarDate.value = data.lunarDate
        suitable.value = data.suitable
        unsuitable.value = data.unsuitable
      } catch (error) {
        console.error('获取农历信息失败:', error)
      }
    }

    onMounted(() => {
      updateAlmanac()
      // 每天凌晨更新一次
      const now = new Date()
      const tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1)
      const timeToNextDay = tomorrow - now
      setTimeout(() => {
        updateAlmanac()
        setInterval(updateAlmanac, 24 * 60 * 60 * 1000)
      }, timeToNextDay)
    })

    return {
      solarDate,
      lunarDate,
      suitable,
      unsuitable
    }
  }
}
</script>

<style lang="scss">
.date-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 14px 16px;
  margin: 0;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

  .date-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 12px;

    .solar-date {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 6px;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    }

    .lunar-date {
      font-size: 13px;
      opacity: 0.8;
      font-weight: 400;
    }
  }

  .divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    margin: 12px 0;
  }

  .almanac-section {
    display: flex;
    justify-content: space-around;
    margin-top: 12px;
    gap: 10px;

    .almanac-item {
      text-align: center;
      flex: 1;
      padding: 8px 6px;

      &:first-child {
        border-right: 1px solid rgba(255, 255, 255, 0.2);

        .label {
          color: #91f991;
          border: 1.5px solid #91f991;
          box-shadow: 0 0 8px rgba(145, 249, 145, 0.3);
        }
      }

      &:last-child {
        .label {
          color: #ff9292;
          border: 1.5px solid #ff9292;
          box-shadow: 0 0 8px rgba(255, 146, 146, 0.3);
        }
      }

      .label {
        font-size: 13px;
        margin-bottom: 10px;
        display: inline-block;
        padding: 4px 12px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.1);
        font-weight: 600;
      }

      .value {
        font-size: 12px;
        line-height: 1.6;
        display: block;
        padding: 0 6px;
        word-break: break-all;
        color: rgba(255, 255, 255, 0.9);
        font-weight: 400;

        &:empty::before {
          content: '暂无数据';
          color: rgba(255, 255, 255, 0.5);
          font-style: italic;
        }
      }
    }
  }
}
</style>